<template>
	<view>
		<view class="u-flex-col u-row-center u-col-center">
			<u-image src="/static/icon/yue.png" :width="190" :height="190" border-radius="95">
				<u-loading slot="loading"></u-loading>
			</u-image>
			<!-- <image class="yue-img" src="/static/icon/yue.png" mode=""></image> -->
			<text class="yue-text u-margin-top-30">余额：{{vuex_userInfo.remain_money}}</text>
		</view>
		<view class="u-padding-20">
			<u-cell-item title="提现" arrow-direction="right" :title-style='{"margin-left" : "30rpx;"}'
				@click='apply_show'>
				<u-icon slot="icon" size="32" name="red-packet"></u-icon>
			</u-cell-item>
		</view>
		<u-popup v-model="popup_show" mode="center" border-radius="20">
			<view class="popup_center u-flex-col u-padding-30">
				<text class="popup_title u-margin-bottom-40">金额</text>
				<view class="u-flex money_input u-margin-bottom-40">
					<text>金额：</text>
					<u-input v-model="money" type='number' focus trim placeholder="请输入提现金额"/>
				</view>
				<u-button @click="apply" type="warning">提现</u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast" :icon='false' />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popup_show: false,
				money: '',
			}
		},
		onLoad() {
			this.getUserInfo() ;
		} ,
		methods: {
			getUserInfo() {
				if (this.vuex_hasLogin) {
					this.$u.api.getUserInfo({}).then(res => {
						this.$u.vuex('vuex_userInfo' , res.info) ;
					})
				}
			},
			apply() {
				if (this.money <= 0) {
					this.$refs.uToast.show({
						title: `请输入正确的提现金额`,
						type: 'warning',
						position: 'bottom',
						icon: false,
					});
					return false;
				};
				if (this.money > this.vuex_userInfo.remain_money) {
					this.$refs.uToast.show({
						title: `余额不足`,
						type: 'warning',
						position: 'bottom',
						icon: false,
					});
					return false;
				};
				this.$u.api.apply({
					money: this.money,
				}).then(res => {
					let tost_type = 'success';
					if (res.code == 1) {
						tost_type = 'success';
						this.getUserInfo();
					} else {
						tost_type = 'warning';
					};
					this.popup_show = false;
					this.$refs.uToast.show({
						title: `${res.msg}`,
						type: tost_type,
						position: 'bottom',
						duration: 2500,
						icon: false,
					});
				})
			},
			apply_show() {
				this.popup_show = true;
			},
			getUserInfo() {
				if (this.vuex_hasLogin) {
					this.$u.api.getUserInfo({}).then(res => {
						this.$u.vuex('vuex_userInfo', res.info);
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup_title {
		font-weight: 700;
		font-size: 32rpx;
		color: #000;
	}
	.popup_center {
		width: 500rpx;
	}

	.money_input {
		border-bottom: solid 2rpx #eee;
	}

	

	.yue-text {
		font-weight: 700;
		font-size: 40rpx;
		color: #000000;
	}

	.yue-img {
		width: 190rpx;
		height: 190rpx;
	}
</style>
